<template>
    <div>
        <mt-swipe :auto="4000">
            <!--      在组件中使用 v-for 一定要使用 :key      -->
            <!--      将来谁用轮播图，谁为轮播图  lunbotuList 传递数据    -->
            <!--      此时， lunbotuList 应该是 父组件向子组件传值来设置      -->
            <mt-swipe-item v-for="item in lunbotuList" :key="item.url" v-bind:key="item.img">
                <img :src="item.img" alt="" :class="{'full':isfull}">
            </mt-swipe-item>
        </mt-swipe>
    </div>

    <!--
     分析：商品评论中的轮播图那么丑
     1. 首页中的图片，他的宽和高都是使用了 100% 的宽度
     2. 在商品详情页面张，轮播图的图片，如果也使用宽高为 100% 的话，页面不好看
     3. 商品详情页面中的轮播图，期望高度是 100%，但是宽度为自适应
     4. 经过分析，得到问题的原因：首页的轮播图和详情页面中的轮播图，分歧点是 宽度到底是 100% 还是自适应
     5. 既然这两个轮播图，其他方面都是没有冲突的，只是宽度有分歧，那么，可以定义一个属性，让轮播图的调用者，手动指定是否为 100% 的宽度
      -->
</template>

<script>
    export default {
        props: ["lunbotuList", "isfull"]
    }
</script>

<style scoped>
    .mint-swipe {
        height: 200px;
        text-align: center;
    }
    .mint-swipe-item img {
        /*width: 100%;*/
        height: 100%;
    }

    .full {
        width: 100%;
    }
</style>